iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0
JavaScript

學習網頁的眉眉角角系列 第 8

Day 8 : JavaScript 「函式」重複使用程式碼的關鍵

  • 分享至 

  • xImage
  •  

在前幾天的文章中,學習了變數、資料型別、條件判斷與循環等基礎語法。今天我將學習 JavaScript 中的另一個關鍵概念:函式。透過函式,我們可以將重複的程式碼封裝在一起,並且隨時調用,這樣能使程式更有條理、更容易維護。

什麼是函式?

函式是一組可以被重複調用的程式碼。你可以將一段邏輯包裝成函式,當你需要這段邏輯時,直接調用函式,而不需要重複撰寫相同的程式碼。

函式的定義
在 JavaScript 中,我們可以使用 function 關鍵字來定義一個函式:

function greet() {
    console.log("Hello, world!");
}

這是一個簡單的函式,名稱是 greet,每次我們調用它時,會在控制台中顯示 "Hello, world!"。

如何呼叫函式

定義好函式後,可以隨時呼叫它:

greet(); // 呼叫 greet 函式,輸出 "Hello, world!"

每次呼叫函式,該函式內的程式碼都會被執行。

函式的參數

有時,我們希望函式能夠處理不同的資料。這時我們可以使用參數來讓函式更靈活。參數是在定義函式時,傳遞進來的值。

舉例:

function greetUser(name) {
    console.log("Hello, " + name + "!");
}

這個函式 greetUser 接收一個參數 name,並在執行時將其包含在訊息中。調用函式時,我們可以傳入不同的參數值:

greetUser("Alice"); // 輸出 "Hello, Alice!"
greetUser("Bob"); // 輸出 "Hello, Bob!"

函式的回傳值

函式不僅可以輸出資料,還可以回傳資料。透過 return 關鍵字,我們可以讓函式回傳一個值,並在呼叫函式時使用該值。

舉例:

function add(a, b) {
    return a + b;  }
let sum = add(5, 3); // add(5, 3) 回傳 8
console.log(sum); // 輸出 8

這裡,add 函式接收兩個參數 a 和 b,並回傳它們的和。回傳值可以被儲存到變數中,然後在程式的其他地方使用。

匿名函式與箭頭函式

除了傳統的函式定義方式,JavaScript 還允許定義匿名函式和箭頭函式(arrow functions)。這些是一些更簡潔的寫法,尤其在處理回呼函式(callbacks)時非常有用。

匿名函式

let greet = function() {
    console.log("Hello!");
};
greet(); // 呼叫匿名函式

箭頭函式

let greet = () => {
    console.log("Hello!");
};
greet(); // 呼叫箭頭函式

箭頭函式語法較為簡潔,特別適合在短短的函式中使用。

總結

函式是 JavaScript 中的基本組件之一,能夠讓程式碼變得更具結構性和可重複使用。透過參數與回傳值,可以讓函式更具靈活性。今天的學習只是函式的基本概念,未來我將進一步探討如何在更複雜的應用中使用函式,讓程式變得更強大。


上一篇
Day 7 :JavaScript 「控制流程」條件判斷與循環
下一篇
Day 9 :JavaScript 的資料結構「陣列與物件」
系列文
學習網頁的眉眉角角17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言